<script type="text/javascript" charset="utf-8">
	var $j = jQuery.noConflict();
	$j(document).ready(function() {
	//get The users' array of arrays of data
	data= <%= User.get_all_users_stat %>;
    if (data.length != 0) {
		//the graphs that we want to show
		names=["Registered Users","Logged in"]; 
		//the time interval between one point and another in the graph.
		pointInterval= <%= 1.day * 1000 %>; 
		// Start point of the graph.
		x= <%= User.get_all_users_start_date %>;
		if(x != -1) {
			pointStart= <%= User.get_all_users_start_date.days.ago.to_i * 1000 %>;
			//Label for x-axis
			xl="Day"; 
			yl="Number";
			titleOfGraph="All Users Statistics"; 
			//call the method that renders the graph with the calculated parameters.
			document.getElementById("noUser").style.display= "none"; 
			Graph(data,names,pointInterval,pointStart,xl,yl,titleOfGraph); 
		} 
		else {
			document.getElementById("noUser").style.display= "block";  
			document.getElementById("ccc").style.display= "none"; 
		}
	} 
	else {
		document.getElementById("noUser").style.display= "block";  
		document.getElementById("ccc").style.display= "none"; 
	}
   }
   );
</script>
<div class="row-fluid">
	<div class="sidebar-nav-fixed">
		<div class="well sidebar-nav">
	      		<ul class="nav nav-list">
					<li class="nav-header">Directory</li>
					<li class="divider"></li>		
					<li><a href="/users"><i class="icon-user"></i><font size="4%">Users</font></a></li>
					<li><a href="/interests/list"><i class="icon-heart"></i><font size="4%">Interest</font></a></li>
					<li><a href="/stories"><i class="icon-book"></i><font size="4%">Stories</font></a></li>
					<li class="divider"></li>
					<li class="active"><a href="/admins/statistics/all_users"><i class="icon-signal"></i><font size="4%">Statistics</font></a></li>
					<li><a href="/logs"><i class="icon-list"></i><font size="4%">Logs</font></a></li>
				</ul>
			</div>
		<div style="margin-top: 20px; background-color: #f8f8f8;">
					<ul class="nav nav-list">
					  <li class="nav-header">
					     Number of registered users : </li>
					     <li class="divider"></li>
					     <li class="nav-header" style="margin-left:20%; margin-right:20%; width: 60%;"> <%= User.all_user_registered %> users.</li>
				    
				</ul>
		</div>	
	</div>
  <div class="main-user-profile-page">
  	<div class="middle-user-profile-page-panel">
  		<ul class="nav nav-tabs" >
	       <!-- Check Whether There Is Any User In The Database Or Not -->
	        <li class="active">
				<%= link_to "Users", {controller: 'statistics' ,action: 'all_users'} %>
			</li>
			<li>
				<%= link_to "Interests", {controller: 'statistics' ,action: 'all_interests'} %>
			</li>
			<li>
				<%= link_to "Stories", {controller: 'statistics' ,action: 'all_stories'} %>
			</li>
		</ul>
 
	
	<div id="noUser" style="display: none; margin-top:20px;">  
		<a class="close" data-dismiss="alert"></a>
		 <div class="alert">
		  <h2><strong>Warning!</strong> No Users in our database Yet.</h2>
	     </div>
	</div>
	<% if !(@users.empty?) %>
		<div id="ccc"></div>

		<div class="general info" id ="genInfo" style="margin-top:20px;">
			<% if User.get_users_ranking.first.get_user_rank == 0 %>
				<div class="alert">  
					<a class="close" data-dismiss="alert"></a>
					<h1><strong>Warning!</strong> No Contributions By Our Users Yet.</h1>
				</div>
			<% else %>
				<ul class="nav nav-list" style="width:20%; padding-bottom:20px;">
					<li class="nav-header">
						Top 5 Users :
					</li>
					<li class="divider"></li>

						<!--Make A User Component For Each Of The Top Ranked Five Users Contiaing Email, Name, Rank
						And A Link To His Profile Page And Statistics Page -->
				</ul>	
				
				<% User.get_users_ranking[0..4].each do |user|%>
					<div class="well-user-component">
						<a href="/users/<%= user.id%>"
						style="display:block; float:left; height:100px;">
						<% if not user.image? %>
							<%= image_tag "logo.jpeg", :class=>"img-user-component" %>
						<% else %>
							<img src= "<%= user.image %>" width="80" style="height:100px"/>
						<% end %> </a>
						<div style="padding-left:10px; margin-left:100px;">
							<h3>
								<% if user.name.nil? %>
									<%= user.email.split("@")[0] %>
								<% else %>
									<%= user.name %>
								<% end %>
							</h3>
							<%= link_to "Profile",
							{:controller => 'users', :action => 'show',:id => user.id },
							class: "interest-component-button-absolute btn btn-warning"%>
							
							<h5>Email : <%=user.email%></h5>
							<h5>Rank : <%= user.get_user_rank %></h5>
							<%= link_to "Statistics",
							{:controller => 'statistics', :action => 'users',:id => user.id },
							class: "interest-component-button-absolute btn btn-primary"%>
							<h5>Registration date : <%=time_ago_in_words(user.created_at) +" ago"%></h5>
							
							<% if !(user.deactivated) %>
          
                               <span class="greenbadge"  style="width:100%" >Active</span>

                            <% else%>

                               <span class="redbadge"  style="width:100%">Deactivated</span>

                            <% end %>
						</div>
					</div>
				<% end %>
			<% end %>
		</div>
	<% end %>
   </div>
</div>

</div>

